<template>
  <div>
    <div class="banner">
      <el-carousel :interval="5000" arrow="always" loop height="977px">
        <el-carousel-item>
          <img src="@/assets/images/home/banner_1.jpg" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/home/banner_2.jpg" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/home/banner_3.jpg" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/home/banner_4.jpg" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/home/banner_5.jpg" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/home/banner_6.jpg" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/home/banner_7.jpg" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tool">
      <div class="title"><h3>购车工具</h3></div>
      <el-row>
        <el-col :span="6"
          ><div class="tool-box" @click="$router.push({path:'/drive'})">
            <div class="content">
              <div class="pic">
                <img src="@/assets/images/home/home_100000045.png" alt="" />
              </div>
              <div class="text">线上赏车</div>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="tool-box" @click="$router.push({path:'/jisuanqi'})">
            <div class="content">
              <div class="pic">
                <img src="@/assets/images/home/home_100000046.png" alt="" />
              </div>
              <div class="text">金融计算器</div>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="tool-box">
            <div class="content">
              <div class="pic">
                <img src="@/assets/images/home/home_100000047.png" alt="" />
              </div>
              <div class="text">查询经销商</div>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="tool-box" @click="$router.push({path:'/drive'})">
            <div class="content">
              <div class="pic">
                <img src="@/assets/images/home/home_100000048.png" alt="" />
              </div>
              <div class="text">预约试驾</div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
    <div class="car-box">
      <div class="title"><h3>车型探索</h3></div>
      <div class="car-content">
        <div class="car-nav">
          <ul>
            <li :class="index == 1 ? 'active' : ''" @click="carNav(1)">
              <span>纯电</span>
            </li>
            <li :class="index == 2 ? 'active' : ''" @click="carNav(2)">
              <span>轿跑/轿车</span>
            </li>
            <li :class="index == 3 ? 'active' : ''" @click="carNav(3)">
              <span>SUV/MPV</span>
            </li>
          </ul>
        </div>
        <div class="dian-car" v-if="index == 1">
          <div class="left">
            <img src="@/assets/images/home/home_100000036.png" alt="" />
          </div>
          <div class="right">
            <h4>UX 300e</h4>
            <p>豪华纯电动车型</p>
            <p>雷克萨斯UX300e</p>
            <p>厂商建议零售价362,000元起</p>
            <a @click="$router.push({path:'/car',query:{id:0}})">了解详情 ></a>
            <div><button @click="$router.push({path:'/drive'})">预约试驾</button><button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></div>
            <p class="small-p">所示车型为UX 300e纯享版</p>
          </div>
        </div>
        <div class="jiaoche" v-if="index == 2">
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000002.png" alt=""
            /></template>
            <template v-slot:title><h4>ES</h4></template>
            <template v-slot:p1><p>中大型豪华行政级轿车</p></template>
            <template v-slot:p2><p>新雷克萨斯ES</p></template>
            <template v-slot:p3><p>厂商建议零售价294,900元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:1}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">所示车型为ES 300h行政版</p></template
            >
          </comp-car>
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000003.png" alt=""
            /></template>
            <template v-slot:title><h4>LS</h4></template>
            <template v-slot:p1><p>旗舰级豪华轿车</p></template>
            <template v-slot:p2><p>新雷克萨斯LS</p></template>
            <template v-slot:p3><p>厂商建议零售价878,000元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:2}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">所示车型为LS 500h行政版</p></template
            >
          </comp-car>
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000004.png" alt=""
            /></template>
            <template v-slot:title><h4>LC</h4></template>
            <template v-slot:p1><p>旗舰级豪华GT轿跑</p></template>
            <template v-slot:p2><p>雷克萨斯LC</p></template>
            <template v-slot:p3><p>厂商建议零售价1,155,000元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:3}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">所示车型为LC 500h运动版</p></template
            >
          </comp-car>
        </div>
        <div class="suv-car" v-if="index == 3">
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000005.png" alt=""
            /></template>
            <template v-slot:title><h4>UX</h4></template>
            <template v-slot:p1><p>豪华都市SUV</p></template>
            <template v-slot:p2><p>雷克萨斯UX</p></template>
            <template v-slot:p3><p>厂商建议零售价259,000元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:4}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">*所示车型为UX 260h探·享版</p></template
            >
          </comp-car>
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000006.png" alt=""
            /></template>
            <template v-slot:title><h4>NX</h4></template>
            <template v-slot:p1><p>中型豪华SUV</p></template>
            <template v-slot:p2><p>雷克萨斯NX</p></template>
            <template v-slot:p3><p>厂商建议零售价302,000元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:5}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">所示车型为NX 300h F SPORT版</p></template
            >
          </comp-car>
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000007.png" alt=""
            /></template>
            <template v-slot:title><h4>RX/RXL</h4></template>
            <template v-slot:p1><p>中大型豪华SUV</p></template>
            <template v-slot:p2><p>雷克萨斯RX/RXL</p></template>
            <template v-slot:p3><p>厂商建议零售价405,000元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:6}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">所示车型为RX450hL尊贵版6座</p></template
            >
          </comp-car>
          <comp-car>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000008.png" alt=""
            /></template>
            <template v-slot:title><h4>LC</h4></template>
            <template v-slot:p1><p>旗舰级豪华MPV</p></template>
            <template v-slot:p2><p>雷克萨斯LM</p></template>
            <template v-slot:p3><p>厂商建议零售价1,166,000元起</p></template>
            <template v-slot:link><a @click="$router.push({path:'/car',query:{id:7}})">了解详情 ></a></template>
            <template v-slot:btn1><button @click="$router.push({path:'/drive'})">预约试驾</button></template>
            <template v-slot:btn2> <button @click="$router.push({path:'/jisuanqi'})">金融计算器</button></template>
            <template v-slot:p4
              ><p class="small-p">所示车型为LM 300h四座御世版</p></template
            >
          </comp-car>
        </div>
      </div>
    </div>
    <div class="types">
      <div class="title"><h3>品牌与服务</h3></div>
      <div class="types-box">
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000044.jpg" alt=""
          /></template>
          <template v-slot:p1
            ><p class="p1">e-LEXUS CLUB智能手机应用</p></template
          >
          <template v-slot:p2><p class="p2">畅字智能驾车新境界</p></template>
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000045.jpg" alt=""
          /></template>
          <template v-slot:p1><p class="p1">售后服务</p></template>
          <template v-slot:p2
            ><p class="p2">是精湛的技术更是服务的艺术</p></template
          >
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000046.jpg" alt=""
          /></template>
          <template v-slot:p1><p class="p1">雷克萨斯精品</p></template>
          <template v-slot:p2><p class="p2">生活精品&汽车精品</p></template>
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000047.jpg" alt=""
          /></template>
          <template v-slot:p1><p class="p1">雷克萨斯认证二手车</p></template>
          <template v-slot:p2><p class="p2">悉心甄选原厂保证</p></template>
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000048.jpg" alt=""
          /></template>
          <template v-slot:p1><p class="p1">兼融之道</p></template>
          <template v-slot:p2
            ><p class="p2">令动感与优雅互衡科技与环保相生</p></template
          >
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000049.jpg" alt=""
          /></template>
          <template v-slot:p1><p class="p1">匠人匠心</p></template>
          <template v-slot:p2
            ><p class="p2">倾注产品，造就每一个细节的极致</p></template
          >
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000050.jpg" alt=""
          /></template>
          <template v-slot:p1><p class="p1">概念车</p></template>
          <template v-slot:p2
            ><p class="p2">设计风格和技术上的极大突破</p></template
          >
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
        <comp-type>
          <template v-slot:pic
            ><img src="@/assets/images/home/home_type_100000051.jpg" alt=""
          /></template>
          <template v-slot:p1
            ><p class="p1">2022雷克萨斯全球设计大奖</p></template
          >
          <template v-slot:p2><p class="p2">导师阵容揭晓</p></template>
          <template v-slot:link><a href="">了解更多></a></template>
        </comp-type>
      </div>
    </div>
    <div class="car-banner">
      <div class="title"><h3>车型品鉴</h3></div>
      <el-carousel :interval="5000" type="card" height="242px" loop>
        <el-carousel-item class="box">
          <span>NS</span>
          <img src="@/assets/images/home/car_banner_100000049.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>RS</span>
          <img src="@/assets/images/home/car_banner_100000050.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>ES</span>
          <img src="@/assets/images/home/car_banner_100000051.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>LM</span>
          <img src="@/assets/images/home/car_banner_100000052.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>LS</span>
          <img src="@/assets/images/home/car_banner_100000053.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>UX</span>
          <img src="@/assets/images/home/car_banner_100000054.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>UX 300e</span>
          <img src="@/assets/images/home/car_banner_100000055.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item class="box">
          <span>LC</span>
          <img src="@/assets/images/home/car_banner_100000056.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <comp-footer></comp-footer>
  </div>
</template>

<script>
import CompCar from "@/components/comp-car.vue";
import CompType from "@/components/comp-type.vue";
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "home",
  data() {
    return {
      index: 1,
    };
  },
  components: {
    CompCar,
    CompType,
    CompFooter
  },
  methods: {
    carNav(val) {
      this.index = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 1901px;
  height: 977px;
  margin: 0 auto;
  img {
    cursor: pointer;
  }
}
.tool {
  box-sizing: border-box;
  width: 1900px;
  height: 340px;
  margin: 0 auto;
  padding: 60px 0;
  .title {
    margin-bottom: 60px;
    h3 {
      font-size: 25px;
      color: #636363;
      font-weight: normal;
      text-align: center;
    }
  }
  .tool-box {
    text-align: center;
    .content {
      width: 160px;
      margin: 0 auto;
      cursor: pointer;
      .pic {
        img {
          width: 60px;
          height: 60px;
          transform: scale(1);
          transition: all 0.3s linear;
        }
      }
      .text {
        margin-top: 10px;
        font-size: 28px;
        color: #636363;
        font-weight: lighter;
        transition: all 0.3s linear;
      }
    }
  }
  .tool-box:hover .pic img {
    transform: scale(1.4);
  }
  .tool-box:hover .text {
    font-size: 32px;
  }
}
.car-box {
  width: 1900px;
  margin: 0 auto;
  height: 700px;
  box-sizing: border-box;
  padding: 60px 0;
  background-color: #f3f3f3;
  .title {
    margin-bottom: 40px;
    h3 {
      font-size: 25px;
      color: #636363;
      font-weight: normal;
      text-align: center;
    }
  }
  .car-content {
    width: 1900px;
    // padding: 0 100px;
    box-sizing: border-box;
    .car-nav {
      width: 1140px;
      height: 40px;
      margin: 0 auto;
      ul {
        display: flex;
        justify-content: center;
        li {
          width: 120px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
          span {
            color: #636363;
          }
        }
        li.active span {
          padding-bottom: 5px;
          border-bottom: 3px solid #636363;
        }
      }
    }
  }
}
.dian-car {
  height: 535px;
  box-sizing: border-box;
  display: flex;
  padding: 120px;
  .left {
    margin-top: 20px;
    margin-left: 360px;
    img {
      width: 500px;
    }
  }
  .right {
    margin-left: 20px;
    h4 {
      font-size: 22px;
      color: #636363;
      margin-bottom: 20px;
    }
    p {
      color: #636363;
      margin-bottom: 5px;
    }
    a {
      display: block;
      color: #636363;
      margin: 20px 0;
    }
    button {
      cursor: pointer;
      background-color: #f3f3f3;
      border: 1px solid #000;
      padding: 15px 50px;
      border-radius: 5px;
      margin-right: 20px;
    }
    .small-p {
      margin-left: 90px;
      margin-top: 20px;
      font-size: 14px;
    }
  }
}
.jiaoche {
  width: 1900px;
  display: flex;
  justify-content: center;
}
.suv-car {
  width: 1900px;
  display: flex;
  justify-content: center;
}
.types {
  width: 1780px;
  margin: 0 auto;
  .title {
    margin: 60px 0 30px 0;
    h3 {
      font-size: 25px;
      color: #636363;
      font-weight: normal;
      text-align: center;
    }
  }
  .types-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.car-banner {
  width: 1780px;
  margin: 0 auto;
  overflow: hidden;
  .title {
    margin: 60px 0 60px 0;
    h3 {
      font-size: 25px;
      color: #636363;
      font-weight: normal;
      text-align: center;
    }
  }
  span{
    position: absolute;
    top: 20px;
    left: 20px;
    color: #f3f3f3;
    font-size: 26px;
  }
}
a{
  cursor: pointer;
}
</style>